<template>
  <div :style="titleBalance">
    <div :style="headerFlex">
      <div :style="leftBox">
        <div :style="mark"></div>
        <span :style="text">{{name}}</span>
      </div>
    </div>
    <!-- 内容 -->
    <div :style="content">
      <span v-if="subtitle"
            :style="contentSubTitle"> {{subtitle}} </span>
      <span v-if="reason.length"
            class="">&emsp;原因：
        <span v-for="(item, index) in reason"
              :key="index">{{item}}</span>
      </span>
      <div :style="boxBorder">
        <slot name="center" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TitleBalance',
  props: {
    name: {
      type: String,
      default: ''
    },
    subtitle: {
      type: String,
      default: ''
    },
    reason: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    titleBalance () {
      return {
        // paddingBottom: "20px",
        // borderBottom: "1px dashed #cccccc",
      }
    },
    headerFlex () {
      return {
        display: "flex",
        justifyContent: "space-between",
        padding: "12px 0"
      }
    },
    leftBox () {
      return {
        display: "flex",
        alignItems: "center"
      }
    },
    mark () {
      return {
        width: "3px",
        height: "21px",
        backgroundColor: "#eb662b",
        marginRight: "7px"
      }
    },
    text () {
      return {
        color: "#000000",
        fontWeight: 400,
        lineHeight: "21px",
        fontSize: "20px"
      }
    },
    content () {
      return {
        backgroundColor: "#fafafa",
        margin: "10px 0",
        borderRadius: "10px"
      }
    },
    contentSubTitle () {
      return {
        padding: "8px 20px",
        backgroundColor: "#eb662b",
        // color: "#ffffff",
        fontSize: "14px",
        // lineHeight: "36px",
        textAlign: "center",
        borderTopLeftRadius: "10px",
        borderBottomRightRadius: "28px"

      }
    },
    boxBorder () {
      return {
        padding: '10px'
      }
    }
  }
}
</script>

<style scoped>
</style>